<template>
	<view class="detail">
		<navBar :storeId="data.store_id" title="租房详情" :goodsid="data.id" type="3" :iscollection="data.is_collection" @oncollection="oncollection"></navBar>
		<view class="main_block">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in data.others_img" :key="index">
					<view class="swiper-item banner" @tap="goPictrue()">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="main">
				<view class="title">{{ data.name }}</view>
				<view class="tags">
					<text class="tag" v-if="data.type">{{ data.type == 1 ? '整租' : '合租' }}</text>
				</view>
				<view class="info">
					<view class="row">
						<view class="text one">
							<text class="name">租金</text>
							<text class="content">{{ data.rent }}元/月</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">面积</text>
							<text class="content">{{ data.room_size }}m²</text>
						</view>
						<view class="text two">
							<text class="name">楼层</text>
							<text class="content">{{ data.floor }}层</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">类型</text>
							<text class="content" v-if="data.house_type == 1">住宅</text>
							<text class="content" v-if="data.house_type == 2">别墅</text>
							<text class="content" v-if="data.house_type == 3">公寓</text>
							<text class="content" v-if="data.house_type == 4">商铺</text>
							<text class="content" v-if="data.house_type == 5">写字楼</text>
						</view>
						<view class="text two">
							<text class="name">物业费</text>
							<text class="content">{{ data.property_fee }}</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">水费</text>
							<text class="content">{{ data.water_fee }}元/m³</text>
						</view>
						<view class="text two">
							<text class="name">电费</text>
							<text class="content">{{ data.electric_fee }}元/度</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">燃气费</text>
							<text class="content">{{ data.gas_fee }}元/m³</text>
						</view>
						<view class="text two">
							<text class="name">停车费</text>
							<text class="content">{{ data.parking_fee }}元/月</text>
						</view>
					</view>
					<view class="row">
						<view class="text one">
							<text class="name">小区</text>
							<text class="content">{{ data.village_name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="peizhi">
				<view class="title_all"><text>房屋配置</text></view>
				<view class="content">
					<view class="block" v-for="(item, index) in data.house_config" :key="index">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="promise">{{ data.desc }}</view>
		</view>
		<view class="images">
			<image v-for="(item, index) in data.others_img" :key="index" :src="item.thumb" mode="widthFix" style="width: 100%;"></image>
		</view>
		<comment :goodsid="id" type='3'></comment>
		<view class="map" v-if="longitude != null && latitude != null">
			<view class="title_all">
				<text>楼盘周边</text>
			</view>
			<view class="nav">
				<view class="title"><text>周边规划</text></view>
				<view class="right">
					<text :class="map_keyword == item ? 'active' : ''" v-for="(item, key) in map_arr" :key="key" @tap="getMap(item)">
						{{ item }}
					</text>
				</view>
			</view>
			<view class="map_box"><map class="map_panel" scale="15" :longitude="longitude" :latitude="latitude" :markers="markers_arr"></map></view>
			<view class="list">
				<view class="list_item title">两个公里内周边设施</view>
				<view class="list_item" v-for="(item, index) in markers_arr" :key="index">
					<image src="../../../static/position.png" mode="widthFix"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="more_tuijian">
			<view class="title_all">
				<text>更多推荐</text>
			</view>
			<view class="list">
				<block v-for="(item,index) in data.recommend" :key="index">
					<house-pannel :goods="item" type="3"></house-pannel>
				</block>
			</view>
		</view>
		<view class="footer">
			<view class="index" @tap="goIndex()">
				<image src="../../../static/home.png" mode="widthFix"></image>
				<text>首页</text>
			</view>
			<view class="chat">
				<image src="../../../static/chat.png" mode="widthFix"></image>
				<text>在线客服</text>
			</view>
			<view class="right">
				<view class="block" @tap="addCart()"><text class="car">加入购物车</text></view>
				<view class="block" @tap="pay()"><text class="yuding">在线预定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar-detail/nav-bar-detail.vue';
	import housePannel from '@/components/house-pannel/house-pannel.vue';
	import comment from '@/components/comment/index.vue';
	export default {
		components: {
			navBar,
			housePannel,
			comment
		},
		data() {
			return {
				markers_arr: [],
				longitude: null,
				latitude: null,
				map_keyword: '商业',
				id: null,
				data: {},
				map_arr: ['商业', '教育', '公园', '医院', '地铁', '车站']
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getData();
		},
		methods: {
			oncollection(e) {
				let data = this.data;
				data.is_collection = e.is_collection;
			},
			getData() {
				this.$request
					.post('/landed/getInfo', {
						data: {
							type: 3, //1：楼盘,2：二手房,3:租房
							id: this.id
						}
					})
					.then(res => {
						this.data = res.data.data.list;
						if (this.data.latlng) {
							let latlngObj = this.data.latlng.split(',');
							this.longitude = latlngObj[0];
							this.latitude = latlngObj[1];
						}
						let house_config = [{
								img: '../../../static/house_config/yigui.png',
								name: '衣柜',
								id: 9,
								have: false
							},
							{
								img: '../../../static/house_config/dianshi.png',
								name: '电视',
								id: 1,
								have: false
							},
							{
								img: '../../../static/house_config/conditioner@2x.png',
								name: '空调',
								id: 4,
								have: false
							},
							{
								img: '../../../static/house_config/fridge@2x.png',
								name: '冰箱',
								id: 2,
								have: false
							},
							{
								img: '../../../static/house_config/xiyiji.png',
								name: '洗衣机',
								id: 3,
								have: false
							},
							{
								img: '../../../static/house_config/reshuiqi.png',
								name: '热水器',
								id: 5,
								have: false
							},
							{
								img: '../../../static/house_config/bed-2@2x.png',
								name: '床',
								id: 6,
								have: false
							},
							{
								img: '../../../static/house_config/nuanqi.png',
								name: '暖气',
								id: 7,
								have: false
							},
							{
								img: '../../../static/house_config/kuangdai.png',
								name: '宽带',
								id: 8,
								have: false
							},
							{
								img: '../../../static/house_config/tianrangqi.png',
								name: '天然气',
								id: 10,
								have: false
							}
						];
						let have_house_config = [];
						for (let i = 0; i < house_config.length; i++) {
							for (let key in this.data.house_config) {
								if (house_config[i]['id'] == this.data.house_config[key]) {
									house_config[i]['have'] = true;
									have_house_config.push(house_config[i]);
								}
							}
						}
						this.data.house_config = have_house_config;
					});
			},
			goPictrue() {
				uni.navigateTo({
					url: `/pages/house_property/pictrue/pictrue?type=3&id=${this.id}`
				});
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/tabbar/tabbar-1/tabbar-1'
				});
			},
			addCart() {
				let authData = uni.getStorageSync('authData');
				if (authData.auth) {
					this.$request
						.post('/landed/addMyCar', {
							data: {
								type: 3,
								goods_id: this.id
							}
							// header: {
							// 	Authorization: authData.auth
							// }
						})
						.then(res => {
							if (res.data.code == 10000) {
								uni.showToast({
									title: '添加成功',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '添加失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 2000);
				}
			},
			getMap(keyword = '商业') {
				this.map_keyword = keyword;
				this.$request
					.post('/landed/getAround', {
						data: {
							latlng: this.data.latlng,
							keyword
						}
					})
					.then(res => {
						this.markers_arr = [];
						let markers = res.data.data.list;
						let newMarkers = [];
						for (let $key in markers) {
							newMarkers.push({
								title: markers[$key]['name'],
								latitude: markers[$key]['latitude'],
								longitude: markers[$key]['longitude'],
								iconPath: '/static/position.png'
							});
						}
						this.markers_arr = newMarkers;
					});
			},
			pay() {
				let type = 3;
				let id = this.id;
				uni.navigateTo({
					url: `/pages/house_property/pay/pay?id=${id}&type=${type}`
				});
			}
		}
	};
</script>

<style lang="scss">
	.detail {
		padding-bottom: 150upx;
		background-color: #f3f3f3;

		.main_block {
			box-sizing: border-box;
			padding: 30upx;
			background-color: #ffffff;
			border-bottom-left-radius: 40upx;
			border-bottom-right-radius: 40upx;
			margin-bottom: 20upx;
		}

		.banner {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.main {
			width: 100%;
			padding-top: 10upx;

			.title {
				width: 100%;
				line-height: 50upx;
				font-size: $uni-font-size-base;
				color: #333;
				padding: 0 20upx;
				box-sizing: border-box;
			}

			.tags {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20upx;

				.tag {
					line-height: 50upx;
					font-size: $uni-font-size-base;
					color: #bbbbbb;
					margin-right: 20upx;
				}
			}

			.info {
				width: 100%;
				height: auto;
				padding: 0 20upx;
				box-sizing: border-box;
				margin-bottom: 10upx;
				background-color: #fff;

				.row {
					width: 100%;
					height: 60upx;
					line-height: 60upx;
					font-size: $uni-font-size-base;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.text {
						width: 50%;
						height: 100%;

						&.one {
							width: 100%;
						}

						&.two {
							width: 50%;
						}

						.name {
							display: inline-block;
							margin-right: 20upx;
							min-width: 100upx;
						}

						.more {
							margin: 0 auto;
							text-align: center;
							width: 100%;
							height: 60upx;
							color: #333;
							background-color: #efefef;
						}
					}
				}
			}

			.peizhi {
				width: 100%;

				.title {
					font-size: $uni-font-size-lg;
					color: #333;
					line-height: 100upx;
					width: 100%;
				}

				.content {
					width: 100%;
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					justify-content: flex-start;

					.block {
						display: flex;
						align-items: center;
						flex-shrink: 0;
						flex-direction: column;
						justify-content: center;
						font-size: $uni-font-size-base;
						line-height: 50upx;
						margin-bottom: 10upx;
						width: 16%;
						color: #999999;

						&.active {
							color: #F33632;
						}

						image {
							width: 50%;
						}
					}
				}
			}

			.promise {
				font-size: $uni-font-size-base;
				color: #333;
				box-sizing: border-box;
				padding: 20upx;
				background-color: #ffffff;
			}
		}

		.footer {
			width: 100%;
			height: 130upx;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: $uni-font-size-base;
			background-color: #fff;
			box-sizing: border-box;
			padding-left: 280upx;

			.index,
			.chat {
				width: 140upx;
				height: 100%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #333333;
				position: absolute;
				top: 0;
				left: 0;

				image {
					width: 40upx;
				}
			}

			.chat {
				left: 140upx;
			}

			.right {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;

				.block {
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						width: 90%;
						height: 70upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-radius: 70upx;
						overflow: hidden;
						color: #ffffff;

						&.car {
							background-image: url(../../../static/btn_2.png);
						}

						&.yuding {
							background-image: url(../../../static/btn_1.png);
						}
					}
				}
			}
		}

		.map {
			width: 100%;

			.title {
				width: 100%;
				line-height: 100upx;
				font-size: $uni-font-size-lg;
				color: #333;
				padding: 0 20upx;
				box-sizing: border-box;
			}

			.nav {
				width: 100%;
				height: 80upx;
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				box-sizing: border-box;

				.title {
					width: 20%;
					padding: 0;
					line-height: 80upx;
					font-size: $uni-font-size-lg;
					color: #333;
					box-sizing: border-box;
					color: red;
				}

				.right {
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						margin-left: 30upx;
						color: $uni-text-color;
						font-size: $uni-font-size-base;

						&.active {
							color: red;
						}
					}
				}
			}

			.map_box {
				width: 100%;
				height: 400upx;
				overflow: hidden;

				.map_panel {
					width: 100%;
					height: 100%;
				}
			}

			.list {
				width: 100%;
				box-sizing: border-box;
				padding: 20upx;
				background-color: #ffffff;

				.list_item {
					width: 100%;
					line-height: 1.8em;
					font-size: $uni-font-size-base;
					color: #333;

					&.title {
						color: #bbbbbb;
						line-height: 1.8em;

						text {
							margin-left: 0;
						}
					}

					image {
						width: 30upx;
					}

					text {
						margin-left: 10upx;
					}
				}
			}
		}
	}

	.more_tuijian {
		.list {
			padding: 0 20upx;
		}
	}


	.title_all {
		box-sizing: border-box;
		padding: 20upx 20upx;

		text {
			padding-left: 24upx;
			font-size: $uni-font-size-lg;
			border-left: 6upx solid #f34b32;
			color: #333;
			font-weight: 700;
		}
	}
</style>
